<template>
  <div class="container">
    <div class="query-container">
      <el-card class="query-card">
        <el-form
          :model="queryForm"
          class="query-form"
          ref="formRef"
          label-width="120px"
        >
          <el-row>
            <el-col :span="5">
              <el-form-item label="资产名称">
                <el-input
                  v-model="queryForm.name"
                  placeholder="请输入资产名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="资产编号">
                <el-input
                  v-model="queryForm.number"
                  placeholder="请输入资产编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="资产类别">
                <el-select
                  v-model="queryForm.assetCategoryId"
                  placeholder="请选择资产类别"
                >
                  <el-option
                    v-for="item in assetCategories"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9" class="button-group">
              <el-button type="primary" @click="handleSearch()">查询</el-button>
              <el-button @click="reset()">重置</el-button>
              <el-button type="warning" @click="handleAdd()">新增</el-button>
              <el-button type="danger" @click="batchDelete()">删除</el-button>
            </el-col>
          </el-row>

          <el-collapse>
            <el-collapse-item title="更多查询条件" name="1">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="资产状态">
                    <el-select
                      v-model="queryForm.status"
                      placeholder="请选择资产状态"
                    >
                      <el-option
                        v-for="item in assetStatuses"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="启用日期">
                    <el-date-picker
                      v-model="queryForm.startDate"
                      type="date"
                      placeholder="选择启用日期"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="使用人ID">
                    <el-input
                      v-model="queryForm.userId"
                      placeholder="请输入使用人ID"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="管理人员ID">
                    <el-input
                      v-model="queryForm.adminId"
                      placeholder="请输入管理人员ID"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="存放位置">
                    <el-input
                      v-model="queryForm.locationId"
                      placeholder="请输入存放位置 ID"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="来源">
                    <el-select
                      v-model="queryForm.source"
                      placeholder="请选择来源"
                    >
                      <el-option
                        v-for="item in sources"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="维保厂商ID">
                    <el-input
                      v-model="queryForm.maintenVendorId"
                      placeholder="请输入维保厂商ID"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="维保状态">
                    <el-select
                      v-model="queryForm.maintenStatus"
                      placeholder="请选择维保状态"
                    >
                      <el-option
                        v-for="item in maintenStatuses"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="财务状态">
                    <el-select
                      v-model="queryForm.accountStatus"
                      placeholder="请选择财务状态"
                    >
                      <el-option
                        v-for="item in accountStatuses"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="创建人ID">
                    <el-input
                      v-model="queryForm.creatorId"
                      placeholder="请输入创建人ID"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </el-card>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        fit
        @selection-change="handleSelectionChange"
        size="mini"
        style="width: 100%"
      >
        <el-table-column fixed type="selection" width="55" />
        <el-table-column fixed prop="id" lable="label" width="50" />
        <el-table-column fixed prop="assetStatus" label="资产状态" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.assetStatus === 1" type="success"
              >闲置中</el-tag
            >
            <el-tag v-else-if="scope.row.assetStatus === 2" type="warning"
              >使用中</el-tag
            >
            <el-tag v-else-if="scope.row.assetStatus === 3" type="danger"
              >借用中</el-tag
            >
            <el-tag v-else-if="scope.row.assetStatus === 4" type="warning"
              >维修中</el-tag
            >
            <el-tag v-else-if="scope.row.assetStatus === 5" type="danger"
              >已报废</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed prop="assetName" label="资产名称" width="120" />
        <el-table-column fixed prop="number" label="资产编号" width="120" />
        <el-table-column
          prop="assetCategoryName"
          label="资产类别"
          width="120"
        />
        <el-table-column prop="model" label="型号" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="brand" label="品牌" />
        <el-table-column prop="source" label="资产来源" />
        <el-table-column prop="adminName" label="管理员" />
        <el-table-column prop="userName" label="使用人" />
        <el-table-column prop="nowStorageLocationName" label="现存位置" />
        <el-table-column prop="targetStorageLocationName" label="目标位置" />
        <el-table-column prop="usage" label="用途" />
        <el-table-column prop="amount" label="数量" />
        <el-table-column prop="factoryDate" label="出厂日期" type="date" />
        <el-table-column prop="startDate" label="入库日期" type="date" />
        <el-table-column prop="supplierName" label="供应商" />
        <el-table-column prop="supplierPersonnelName" label="供应商联系人" />
        <el-table-column prop="maintenVendorName" label="维保商" />
        <el-table-column prop="warranty" label="维保期限 (月)" />
        <el-table-column
          prop="maintenStarted"
          label="维保开始时间"
          type="date"
        />
        <el-table-column prop="maintenStatus" label="维保状态" />
        <el-table-column prop="accountStatus" label="账务状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.accountStatus === 1" type="danger"
              >未入账</el-tag
            >
            <el-tag v-if="scope.row.accountStatus === 2" type="success"
              >已入账</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="创建人" />
        <el-table-column prop="created" label="创建时间" type="date" />
        <el-table-column prop="updated" label="更新时间" type="date" />
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              @click="handleDetail(scope.row.id)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 10, 20, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { fixedAsset } from "@/api/fixedAsset";
export default {
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 10,
      count: 0,
      queryForm: {
        name: null,
        number: null,
        assetCategoryId: null,
        status: null,
        startDate: null,
        userId: null,
        adminId: null,
        locationId: null,
        source: null,
        maintenVendorId: null,
        maintenStatus: null,
        accountStatus: null,
        creatorId: null,
      },
      multipleSelection: [],
      assetCategories: [
        { id: 1, name: "cpu" },
        { id: 2, name: "内存" },
        { id: 3, name: "硬盘" },
      ],
      assetStatuses: [
        { id: 1, name: "闲置中" },
        { id: 2, name: "使用中" },
        { id: 3, name: "借用中" },
        { id: 4, name: "维修中" },
        { id: 5, name: "已报废" },
      ],
      maintenStatuses: [
        { id: 1, name: "正常" },
        { id: 2, name: "异常" },
      ],
      accountStatuses: [
        { id: 1, name: "未入账" },
        { id: 2, name: "已入账" },
      ],
      sources: [
      { id: 1, name: "购入" },
      { id: 2, name: "自建" },
      { id: 3, name: "租赁" },
      { id: 4, name: "捐赠" },
      { id: 5, name: "盘盈" },
      { id: 6, name: "其他" },
      ],
    };
  },
  created() {
    this.getAssetList();
  },
  methods: {
    getAssetList() {
      const page = this.page;
      const limit = this.limit;
      const queryForm = this.queryForm;
      fixedAsset.list({ page, limit, ...queryForm }).then((response) => {
        this.tableData = response.data;
        this.count = response.count;
      });
    },
    handleSearch() {
      this.getAssetList();
    },
    reset() {
      this.queryForm = {};
      this.getAssetList();
    },
    handleAdd() {
      // 跳转新增页面
      this.$router.push({
        name: "FixedAssetAdd",
      });
    },
    batchDelete() {
      const ids = this.multipleSelection.map((item) => item.id);
      if (ids.length === 0) {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning",
        });
        return;
      }
      const batchDeleteDto = {
        ids: ids,
      };
      // console.log(batchDeleteDto);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除
          fixedAsset.deleteBatch(batchDeleteDto).then((response) => {
            this.$message({
              message: response.msg,
            });
            this.getAssetList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      
    },
    //
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDetail(id) {
      // 跳转详情页面
        this.$router.push({
          name: "FixedAssetDetail",
          params: { id: id },
        });
    },
    handleEdit(id) {
      // 跳转编辑页面
      this.$router.push({
          name:"FixedAssetEdit",
          params:{id:id}
      })
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除
          fixedAsset.delete(id).then((response) => {
            this.$message({
              message: response.msg,
            });
            this.getAssetList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getAssetList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getAssetList();
    },
  },
};
</script>
<style scoped>
/* .query-form {
  margin: 5px;
} */
.container {
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.query-container {
  margin-bottom: 20px;
}

.query-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* .button-group {
  display: flex;
  justify-content: space-between;
} */

.table-container {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.pagination-container {
  margin-top: 20px;
}
</style>
